import React, { useEffect, useState } from 'react'
import useGetTableData from '@/hooks/useGetTableData'
import { systemTaskInfoQuery } from '@/api/task'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useReceiptColumns } from '../columns'
import { ITableData } from '../types'
import CustomTable from '@/components/CustomTable'
import { useNavigate } from 'react-router-dom'
import { downloadByUrlBigFile, getNameByOwnUrl, getRecentThreeMonths } from '@/utils/util'
import dayjs from 'dayjs'
import { TaskStatusOptions } from '@/constant'
import { Empty } from 'antd'
import useSearchUser from '@/hooks/useSearchUser'
import { onValuesChange } from '@/utils/onValuesChange'
const Index: React.FC = () => {
  const [form] = useForm()
  const navigate = useNavigate()
  const defaultDateRange = getRecentThreeMonths()
  const { UserOptions, handleSearchUser, setUserOptions } = useSearchUser()
  const { tableProps, params, search, reset } = useGetTableData<ITableData>(systemTaskInfoQuery, {
    form: form,
    defaultFieldsParams: {
      createTimeStart: defaultDateRange,
    },
    defaultParams: {
      taskType: 3,
    },
    immediatelySend: false,
  })
  useEffect(() => {
    search({
      ...params,
      createTimeStart: dayjs(defaultDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
      createTimeEnd: dayjs(defaultDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
    })
  }, [])
  const onDownload = (info: ITableData) => {
    const filename = getNameByOwnUrl(info.fileId)
    downloadByUrlBigFile(info.fileId, filename)
  }
  return (
    <PageContainer className="suppliermgr_page">
      <SearchForm
        className="task_receipt_wrap"
        params={params}
        form={form}
        onValuesChange={(changedValues) => onValuesChange(changedValues, ['task_id'], form)}
        searchConfig={[
          { label: '任务ID', name: 'task_id', type: 'Input' },
          { label: '创建时间', name: 'createTimeStart', type: 'RangePicker', config: { showTime: true } },
          {
            label: '任务状态',
            name: 'taskStatus',
            type: 'Select',
            option: TaskStatusOptions,
          },
          {
            label: '创建者',
            name: 'createBy',
            type: 'Select',
            option: UserOptions,
            config: {
              suffixIcon: null,
              showSearch: true,
              optionFilterProp: 'label',
              filterOption: false,
              onSearch: handleSearchUser,
              notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
            },
          },
        ]}
        onFinish={(vals: any) => {
          search({
            ...vals,
            createTimeStart: vals?.createTimeStart?.[0] && dayjs(vals.createTimeStart[0]).format('YYYY-MM-DD HH:mm:ss'),
            createTimeEnd: vals?.createTimeStart?.[1] && dayjs(vals.createTimeStart[1]).format('YYYY-MM-DD HH:mm:ss'),
          })
        }}
        onReset={() => {
          reset()
        }}
      ></SearchForm>
      <CustomTable
        bordered
        columns={useReceiptColumns({ onDownload })}
        {...tableProps}
        rowKey={(row) => row.taskId}
        isScrollY
        filterDomClassName="task_receipt_wrap"
        extraHeight={30}
      />
    </PageContainer>
  )
}

export default Index
